<template>
	<view class="index">
		<view class="search-wrapper">
			<input type="text" v-model="keywords" class="input" placeholder="输入客户名查询" @confirm="search"
				confirm-type="search" />
			<uni-icons v-if="keywords" type="clear" @tap="keywords = ''" size="18" color="#898989"
				class="close"></uni-icons>
			<image src="https://cdpresources.hobon.cc/procurement-mini-program/static/search.png" class="icon"
				mode="widthFix"></image>
			<view class="search-btn" @click="refresh">
				搜索
			</view>
		</view>
		<view class="content-wrapper">
			<view class="left-wrapper">
				<view class="item" @click="selectLabel(0)" :class="{'current':labelIndex === 0}">
					近7天
				</view>
				<view class="item" @click="selectLabel(1)" :class="{'current':labelIndex === 1}">
					近一个月
				</view>
				<view class="item" @click="selectLabel(2)" :class="{'current':labelIndex === 2}">
					近一年
				</view>
				<view class="item" @click="selectLabel(3)" :class="{'current':labelIndex === 3}">
					僵尸客户
				</view>
				<view class="item" @click="selectLabel(4)" :class="{'current':labelIndex === 4}">
					黑名单
				</view>
				<view class="item" @click="selectLabel(index + 5)" v-for="(item,index) in tagList"
					:class="{'current':labelIndex === index + 5}" :key="index">
					{{ item.labelName }}
				</view>
				<view class="block"></view>
				<view class="add-btn" @click="goLabel">
					标签维护
				</view>
			</view>
			<view class="right-wrapper">
				<mescroll-uni height="100%" bottom="110" @init="mescrollInit" @down="refresh" @up="upCallback"
					:up="upOption" :down="downOption">
					<view class="item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
						<view class="base-info">
							<text class="name">
								{{ item.customerPetName }}
							</text>
							<text class="phone">{{ item.mobilePhone }}</text>
						</view>
						<view class="order-info">
							<text>
								￥{{ item.orderAmount }}
							</text>
							<text>
								{{ item.orderCount }}单
							</text>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				keywords: '',
				labelList: [],
				labelIndex: 0,
				list: [],
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false,
					page: {
						size: 10 // 每页数据的数量,默认10 
					},
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '~ 空空如也 ~',
						icon: 'https://sm.hobon.cc/static/hobon_nogoods.png',
						fixed: true,
						top: '200upx',
					},
					textNoMore: '没有更多啦',
				},
				keywords: '',
				pageNum: 1,
				pageSize: 10,
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			tagList() {
				return this.$store.state.tagList
			}
		},
		mounted() {
			this.getLabel()
		},
		methods: {
			refresh() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},
			async upCallback(page) {
				this.pageNum = page.num;
				const params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					pickupPointId: this.userInfo.pickupPointId,
					customerPetName: this.keywords,
				};
				if (this.labelIndex === 0) {
					params.queryType = 'SEVEN_DAY'
				} else if (this.labelIndex === 1) {
					params.queryType = 'MONTH'
				} else if (this.labelIndex === 2) {
					params.queryType = 'YEAR'
				} else if (this.labelIndex === 3) {
					params.queryType = 'OVER_YEAR'
				} else if (this.labelIndex === 4) {
					params.isBlacklist = true
				} else {
					params.labelId = this.tagList[this.labelIndex - 5].id
				}
				const data = await this.$api.post("/app/pickuppoint/customer/page", params, false)
				if (data.code === 200) {
					this.isLoading = false;
					if (this.pageNum === 1) {
						this.list = [];
					}
					console.log("data.data.records", data.data.records)
					this.list = this.list.concat(data.data.records);
					this.mescroll.endBySize(data.data.records.length, data.data.total);
				} else {
					this.mescroll.endErr();
				}
			},
			goLabel() {
				uni.navigateTo({
					url: '/subPage_customer/contactGroup'
				})
			},
			async getLabel() {
				if (!this.tagList.length) {
					this.$store.commit('setTagList')
				}
				this.refresh()
			},
			selectLabel(index) {
				this.labelIndex = index;
				this.refresh()
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/subPage_customer/detail?id=' + item.id
				})
			},
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: hidden;

		.search-wrapper {
			background-color: #ffffff;
			margin: 3upx 0;
			padding: 10upx 20upx;
			position: relative;
			display: flex;
			align-items: center;

			.input {
				border-radius: 10upx;
				border: 2upx solid #acacac;
				height: 70upx;
				width: 100%;
				padding: 0 120upx 0 30upx;
				box-sizing: border-box;
				font-size: 32upx;
			}

			.icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 190upx;
				width: 26upx;
				height: 26upx;
			}

			.close {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 230upx;
			}

			.search-btn {
				width: 200upx;
				background-color: #F26022;
				color: #ffffff;
				height: 70upx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10upx;
				margin-left: 10upx;
				font-size: 28upx;
			}
		}

		.content-wrapper {
			display: flex;
			border-top: 2upx solid #F2F2F2;
			margin-top: 10upx;

			.left-wrapper {
				width: 185upx;
				background-color: #ffffff;
				overflow: auto;
				border-radius: 0 10upx 10upx 0;
				position: relative;
				height: calc(100vh - 110upx);

				.item {
					height: 105upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-left: 10rpx solid #F5F9F8;
					font-size: 28upx;
					color: #3B3B3B;
					text-align: center;

					&.current {
						border-color: #F26022;
						font-size: 32upx;
						background: linear-gradient(90deg, #F2602233 0%, #F2602209 100%);
					}
				}

				.block {
					height: 100rpx;
				}

				.add-btn {
					color: #F26022;
					font-size: 28upx;
					position: fixed;
					bottom: 0upx;
					left: 0;
					width: 185rpx;
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #ffffff;
				}
			}

			.right-wrapper {
				flex: 1;
				//background-color: #ffffff;
				height: calc(100vh - 110upx);
				margin: 0 10rpx;
				border-radius: 10rpx 0 0 10rpx;

				.item {
					background-color: #ffffff;
					border-radius: 10rpx;
					padding: 20upx;
					box-sizing: border-box;
					margin-bottom: 10rpx;

					.base-info {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-weight: bold;
						font-size: 32upx;
					}

					.order-info {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #777777;
						margin-top: 10rpx;
						font-size: 30upx;
					}
				}
			}
		}
	}
</style>